<template>
  <view class="bottom-bar-padding">
    <!-- 顶部安全区，刘海屏等安全区设置 -->
    <u-status-bar></u-status-bar>
    <navigator open-type="navigateBack" class="back-btn">
      <u-icon name="arrow-left" size="35rpx" color="#fff"></u-icon>
    </navigator>
    <!-- 1.轮播图 -->
    <swiper indicator-dots circular class="goods-swiper">
      <swiper-item v-for="item in goodsInfo.pics" :key="item.pics_id">
        <image
          :src="item.pics_big_url"
          mode="scaleToFill"
          class="goods-swiper-image"
          @click="handlerShowBigImage(item.pics_big_url)"
        />
      </swiper-item>
    </swiper>
    <!-- 2.商品信息 -->
    <view class="goods-info">
      <view class="goods-info-title">
        <view class="goods-info-price">{{ goodsInfo.goods_price }}</view>
        <view class="icon-group">
          <u-icon size="44rpx" name="share-square"></u-icon>
          <button open-type="share">分享</button>
        </view>
        <u-icon size="44rpx" name="star"></u-icon>
      </view>
      <view class="goods-info-name">{{ goodsInfo.goods_name }}</view>
    </view>
    <!-- 3.图文详情 -->
    <view class="goods_introduce">
      <view class="goods_introduce-title">图文详情</view>
      <!-- 富文本组件展示html标签 -->
      <rich-text
        class="goods_introduce-content"
        :nodes="goodsInfo.goods_introduce"
      ></rich-text>
    </view>
    <!-- 4.底部操作栏 -->
    <view class="bottom-bar">
      <view class="icon-group">
        <u-icon size="44rpx" name="kefu-ermai" color="#333"></u-icon>
        <view>联系客服</view>
        <button open-type="contact">客服</button>
      </view>
      <view class="icon-group">
        <u-icon size="44rpx" name="shopping-cart" color="#333"></u-icon>
        <view>购物车</view>
      </view>
      <view class="btn" @click="handlerAddCart">加入购物车</view>
      <view class="btn">立即购买</view>
    </view>
  </view>
</template>

<script>
import { getGoodsDetailById } from "@/api/goods.js";
export default {
  data() {
    return {
      goods_id: "",
      goodsInfo: {},
    };
  },
  // onLoad 生命周期钩子可以获取页面参数
  onLoad(query) {
    console.log("获取页面参数", query);
    this.goods_id = query.goods_id;
    this.getGoodsDetail();
  },
  methods: {
    async getGoodsDetail() {
      const res = await getGoodsDetailById(this.goods_id);
      this.goodsInfo = res.data.message;
      // console.log(this.goodsInfo);
      //小程序富文本组件内部html，可通过添加类修改样式
      this.goodsInfo.goods_introduce = this.goodsInfo.goods_introduce.replace(
        /<img/g,
        '<img class="img"'
      );
    },
    handlerShowBigImage(current) {
      const urls = this.goodsInfo.pics.map((v) => v.pics_big_url);
      // 展示大图片,拿到当前点击的图片,以及轮播图中其余图片的数组
      uni.previewImage({
        current: current,
        urls: urls,
      });
    },
    // 加入购物车
    handlerAddCart() {
      // 获取原购物车列表数据
      const newList = [...this.$store.state.cartList];

      // 查找到就返回索引，查找不到返回 -1
      const index = newList.findIndex(
        (v) => v.goods_id === Number(this.goods_id)
      );

      if (index >= 0) {
        // 已存在商品，累加商品数量
        newList[index].goods_count++;
      } else {
        // 新商品追加到数组中
        newList.push({
          // 商品id
          goods_id: this.goodsInfo.goods_id,
          // 商品图片
          goods_small_logo: this.goodsInfo.goods_small_logo,
          // 商品名称
          goods_name: this.goodsInfo.goods_name,
          // 商品价格
          goods_price: this.goodsInfo.goods_price,
          // ---- 用户能操作改变的字段
          // 商品数量
          goods_count: 1,
          // 商品选中状态
          goods_select: true,
        });
      }

      // 更新 Vuex 数据
      this.$store.commit("setCartList", newList);

      // 提示用户
      uni.showToast({
        title: "加入成功",
        // success: 显示成功图标
        icon: "success",
        // mask: 是否显示透明蒙层，防止触摸穿透
        mask: true,
      });
    },
  },
};
</script>

<style lang="scss">
.goods-info {
  background-color: #fff;
  padding: 20rpx;
  .goods-info-title {
    display: flex;
    padding-bottom: 20rpx;
    .goods-info-price {
      color: #eb4450;
      flex: 1;
      // 前面的价格符号
      &::before {
        content: "￥";
        font-size: 80%;
        margin-right: 5rpx;
      }
    }
    // 图标组
    .icon-group {
      width: 44rpx;
      height: 44rpx;
      position: relative;
      margin-left: 40rpx;
      // 图标上方有个定位的按钮
      button {
        position: absolute;
        width: 44rpx;
        height: 44rpx;
        left: 0;
        top: 0;
        opacity: 0;
      }
    }
  }
  // 商品文字
  .goods-info-name {
    font-size: 30rpx;
    line-height: 1.5;
  }
}
.back-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50rpx;
  height: 50rpx;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.5);
  position: fixed;
  left: 30rpx;
  top: 50rpx;
  z-index: 99;
}
.goods-swiper {
  width: 100vw;
  height: 750rpx;
  .goods-swiper-image {
    width: 750rpx;
    height: 750rpx;
  }
}
.goods_introduce-content {
  .img {
    vertical-align: middle;
  }
}
.bottom-bar {
  height: 94rpx;
  display: flex;
  align-items: center;
  background-color: #fff;
  border-top: 1px solid #ddd;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  .icon-group {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 22rpx;
    position: relative;
    button {
      position: absolute;
      left: 0;
      top: 0;
      opacity: 0;
    }
  }
  .btn {
    width: 196rpx;
    height: 60rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #fcaa23;
    border-radius: 30rpx;
    margin: 0 10rpx;
    font-size: 26rpx;
    color: #fff;
    &:last-child {
      background-color: #eb4350;
    }
  }
}
.bottom-bar-padding {
  padding-bottom: 120rpx;
}
</style>
